<template>
  <div class="flex-box">
    <el-input v-model="leftNum" @input="onInput"></el-input>
    <div class="line"></div>
    <el-input v-model="rightNum" @input="onInput"></el-input>
  </div>
</template>

<script setup>
import {ref, defineProps, defineEmits, watch} from 'vue'
import {
  ElInput
} from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  }
})

const emits = defineEmits(['update:modelValue'])

const leftNum = ref('')
const rightNum = ref('')

watch(() => props.modelValue, () => {
  setDefaultValue()
}, {deep: true})

function setDefaultValue() {
  if (props.modelValue && props.modelValue.length) {
    leftNum.value = props.modelValue[0]
    if (props.modelValue.length > 1) {
      rightNum.value = props.modelValue[1]
    }
  } else {
    leftNum.value = ''
    rightNum.value = ''
  }
}

setDefaultValue()

function onInput() {
  const data = [leftNum.value, rightNum.value]
  emits('update:modelValue', data)
}

</script>

<style lang="scss" scoped>
.line {
  width: 10px;
  height: 1px;
  background-color: #999;
  margin: 0 5px;
  flex-shrink: 0;
}

.flex-box {
  display: flex;
  align-items: center;
  width: 150px;

  .el-input {
    flex-shrink: 0;
    width: auto;

    ::v-deep(.el-input__inner) {
      width: 65px !important;
      padding: 0 10px;
    }
  }
}
</style>
